body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,select,p,blockquote,th,td,canvas{margin:0;padding:0;}
body,button,input,select,textarea{color:#fff;font:14px/1.7 "proxima-nova",\5fae\8f6f\96c5\9ed1,arial;}
button{ cursor: pointer;}
fieldset,img{border:0;}
em{font-style:normal;font-weight:normal;}
li{list-style:none;}
:focus{outline:0;}
legend{display:none;}
table { border-collapse: collapse; border-spacing: 0;}
a img{ border: none;}
/* base ---------------------------------------------------*/
h1,h2,h3,h4,h5,h6{  font-family: "Helvetica neue", Helvetica, Tahoma, Arial, "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53", ;  font-weight: 300; }
::selection {  background: rgba(253, 110, 110, 0.63);   color: #fff;   text-shadow: none; }
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);}
::-webkit-scrollbar {
    width: 3px;
}
::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: rgba(0,0,0,.5);
}

/* postion */
.fl{float:left;}
.fr{float:right;}
.hide{ display: none; }

/* clear float */
.clearfix:before,
.clearfix:after{content:".";display:block;height:0;visibility:hidden;font-size:0;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}/* IE < 8 */

body , html{ position: absolute; height: 100%; width: 100%; background-color: #000;}
body{ -webkit-background-size: cover; background-size: cover; background-position: center  center;-moz-user-select:none;-webkit-user-select:none;}
#index{ background-image: url(../img/page-idx.png); -webkit-background-size: 100% 100%;
background-size: 100% 100%;}
#levelList { background-image: url(../img/page-lvlist.png); -webkit-background-size: 100% 100%;
background-size: 100% 100%;}

/* #grid */
#grid{
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: auto;
}
.page , #stage{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
/* loading */
#loading h3{ margin-top: 300px; font-size: 20px; text-align: center;}
#loading .loading_wrap{ height: 10px; width: 90%; overflow: hidden; border: 1px solid #333; margin-left: 5%;}
#loading #loadingBar{width: 0; height: 8px; background-color: #090;}

/* index */
.btn-wrap{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 50px;
    left: 0;
}
.btn-classics{display: block; width: 300px; height: 110px; background: url(../img/pic.png)  -652px -122px; margin: 0 auto; border: none; overflow: hidden; text-indent: -999px; }

/* leves */
#levelList{}
#levelList .handler{ margin-top: 10px; height: 25px; line-height: 25px; width: 100%; text-align: center; font-size: 20px; color: #E8E8E8;text-shadow: 1px 1px 1px rgba(37,60,141,0.7); }
#levelList .handler .icon-prev , #levelList .handler .icon-next{
    display: inline-block;
    height: 15px;
    width: 15px;
    background:url(../img/prev.png);
    vertical-align: middle;
    -webkit-background-size: 15px 15px;
    background-size: 15px 15px;
}
#levelList .handler .icon-next{
    background: url(../img/next.png);
    -webkit-background-size: 15px 15px;
    background-size: 15px 15px;
}

#levelList .wrap{height: 520px; overflow: hidden;margin-top: 50px;}
#levelList ul{ height: 520px; }
#levelList li{ height: 520px; float: left; }

#levelList li .lv-item{width: 25%; display: block;margin-top: 10px; text-align: center; font-size: 50px; float: left; font-weight: bold; cursor: pointer; background-color: #00BEBE; line-height: 120px; height: 120px; position: relative; background:url(../img/bg-list.png) no-repeat center center;
    -webkit-background-size: 120px auto ;background-size: 120px auto ;}
#levelList .lv-item.unlick p{ line-height: 75px;}

#levelList .lv-item.lock{ background:url(../img/bg-list-d.png) no-repeat center center;
    -webkit-background-size: 120px auto ;background-size: 120px auto ;}

#levelList .lv-item.unlock .star-wrap{ position: absolute;  display: block; width: 102px; bottom: 0;left: 50%; margin-left: -51px;  line-height:0; height: 30px;}
#levelList .lv-item.unlock .star-wrap i{float: left; display: inline-block; height: 30px; width: 30px; background:url(../img/star-b.png); -webkit-background-size: 30px 30px;background-size: 30px 30px; margin: 0 2px;}
#levelList .lv-item.unlock .star-wrap i.star{ background-image: url(../img/star.png);}

#levelList .lv-item.unlock .time{ position: absolute; top: 10px; right: 10px; font-size: 14px; line-height: 20px;}

.btn-back{ overflow: hidden; text-indent: -999px; border: none; display: inline-block; height: 110px; width: 200px; background:url(../img/pic.png) -750px -350px; }
#levelList .btn-back{ position: absolute; bottom: 50px; left: 50%; margin-left: -100px;}

/* room */
#room{ background: url(../img/page-room.png); -webkit-background-size: 100% 100%; background-size: 100% 100%;}

#fps{ position: absolute; top: 0; right: 0; padding: 5px; color: #fff;}
#info{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(0,0,0,.7); z-index: 10;}
#info .dialog{
    position: absolute;
    height: 626px;
    width: 546px;
    background-color: #fff;
    padding: 50px;
    top: -1500px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background:url(../img/pic.png);
    transition:all .3s;
    -webkit-transition:all .3s; /* Safari */
}
#info .dialog.show{
    top: 0;
}

#info .btn-wrap{
    height: 240px;
    width: 420px;
    position: absolute;
    bottom: 60px;
    left: 50%;
    margin-left: -210px;
}
#info .dialog .btn{overflow: hidden; text-indent: -999px;float: left; margin: 5px; border: none; width: 200px; height: 110px; background: url(../img/pic.png);}
#info .dialog .btn.back{ margin: 5px;}
#info .dialog .btn.resume , #info .dialog .btn.nextLv{ width: 400px; margin-left: 10px; background-position: -552px -14px;}
#info .dialog .btn.nextLv{ background-position: -552px -620px;}
#info .dialog .btn.restart{ background-position:-750px -467px;}

#info .dialog .title{ font-size: 70px;font-weight: bold; padding: 20px 0; text-align: center; }
#info .dialog .title.pause{ color: #FFF5C5;text-shadow: 2px 0 0 #CA9E50, -2px 0 0 #CA9E50, 0 2px 0 #CA9E50, 0 -2px 0 #CA9E50;}
#info .dialog .title.lose{ color: #B33FD5;text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;}
#info .dialog .help-txt.lose{
    color: #fff;text-shadow: 2px 0 0 #ED5A1B, -2px 0 0 #ED5A1B, 0 2px 0 #ED5A1B, 0 -2px 0 #ED5A1B; text-align: center; font-size: 30px;
}
#info .dialog .title.win{ color: #D5FF09;text-shadow: 2px 0 0 #60CE2F, -2px 0 0 #60CE2F, 0 2px 0 #60CE2F, 0 -2px 0 #60CE2F;}

#info .dialog .info{ color:#008DB1; text-align: center; font-size: 30px; padding-top: 40px; }
#info .dialog .info .star-wrap i{ display: inline-block; height: 130px; width: 132px; background:url(../img/pic.png) -565px -492px;}
#info .dialog .info .star-wrap i.star{ background-position: -564px -357px;}


@media (max-width: 370px ) {
    #index{
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    .btn-wrap{
        height: 50px;
        bottom: 30px;
    }
    .btn-classics{
        width: 150px;
        height: 55px;
        background-position: -325px -62px;
        -webkit-background-size: 475px 380px;
        background-size: 475px 380px;
    }
    .btn-back{ height: 55px; width: 100px; background:url(../img/pic.png) -376px -175px; -webkit-background-size: 475px 380px;
        background-size: 475px 380px; }
    #levelList .btn-back{ position: absolute; bottom: 30px; left: 50%; margin-left: -50px;}

    #levelList li .lv-item{
        height: 75px;
        line-height: 75px;
        -webkit-background-size: 75px auto;
        background-size: 75px auto;
        font-size: 30px;
        margin-top: 5px;
    }

    #levelList .wrap{margin-top: 10px; overflow: hidden;height: 330px; overflow: hidden;}
    #levelList ul,#levelList li{ height: 330px; }


    #levelList .lv-item.unlock .star-wrap{ height: 20px; width: 66px; margin-left: -33px;}
    #levelList .lv-item.unlock .star-wrap i{height: 20px; width: 20px; background:url(../img/star-b.png); -webkit-background-size: 20px 20px;background-size: 20px 20px; margin: 0 1px;}

    #levelList .lv-item.lock{ -webkit-background-size: 75px auto ;background-size: 75px auto ;}
    #info .dialog{
        height: 310px;
        width: 273px;
        padding: 25px;
        -webkit-background-size: 475px 380px;
        background-size: 475px 380px;
    }

    #info .btn-wrap{
        height: 120px;
        width: 210px;
        bottom: 30px;
        margin-left: -105px;
    }
    #info .dialog .btn{ margin: 2.5px; width: 100px; height:55px; -webkit-background-size: 75px auto;
        background-size: 75px auto;-webkit-background-size: 475px 380px; background-size: 475px 380px;}
    #info .dialog .btn.back{ margin: 2.5px;}
    #info .dialog .btn.resume,#info .dialog .btn.nextLv{ width: 200px; margin-left: 5px; background-position: -276px -7px;}
    #info .dialog .btn.nextLv{ background-position: -276px -310px;}
    #info .dialog .btn.restart{ background-position:-375px -234px;}

    #info .dialog .title{ font-size: 40px;font-weight: bold; padding: 2px 0; text-align: center; }
    #info .dialog .info{padding-top: 20px; font-size: 20px;}
    #info .dialog .info .star-wrap i{ float: left; height: 65px; width: 66px; background:url(../img/pic.png) -281px -627px;-webkit-background-size: 475px 380px;        background-size: 475px 380px;}
    #info .dialog .info .star-wrap i.star{ background-position:-282px -559px;}
}

/* animate */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceOut {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(.3);
  }
}

.bounceOut {
  animation-name: bounceOut;
}

.windows8 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 90px;
height:90px;
}

.windows8 .wBall {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 7.15s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 7.15s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 7.15s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 7.15s infinite;
transform: rotate(225deg);
animation: orbit 7.15s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #0FBD7D;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-ms-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px;
}

.windows8 #wBall_1 {
-moz-animation-delay: 1.56s;
-webkit-animation-delay: 1.56s;
-ms-animation-delay: 1.56s;
-o-animation-delay: 1.56s;
animation-delay: 1.56s;
}

.windows8 #wBall_2 {
-moz-animation-delay: 0.31s;
-webkit-animation-delay: 0.31s;
-ms-animation-delay: 0.31s;
-o-animation-delay: 0.31s;
animation-delay: 0.31s;
}

.windows8 #wBall_3 {
-moz-animation-delay: 0.62s;
-webkit-animation-delay: 0.62s;
-ms-animation-delay: 0.62s;
-o-animation-delay: 0.62s;
animation-delay: 0.62s;
}

.windows8 #wBall_4 {
-moz-animation-delay: 0.94s;
-webkit-animation-delay: 0.94s;
-ms-animation-delay: 0.94s;
-o-animation-delay: 0.94s;
animation-delay: 0.94s;
}

.windows8 #wBall_5 {
-moz-animation-delay: 1.25s;
-webkit-animation-delay: 1.25s;
-ms-animation-delay: 1.25s;
-o-animation-delay: 1.25s;
animation-delay: 1.25s;
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}

}

@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}
- See more at: http://cssload.net/#sthash.3W3ZfElz.dpuf
